<!-- 用户管理 -->
<template>
  <div class="button-container">
    <div class="button-top">
      <top @bridge-change="getBridge" />
    </div>

    <el-tabs v-model="activeName" @tab-change="handleTabClick">
      <template v-for="(it, index) in tabList" :key="it.type">
        <el-tab-pane :label="it.name" :name="`${index}`">
          <div class="disease-buttonList">
            <div v-for="item in buttonList" :key="item.type" :class="[
              'disease-button',
              current == item.type ? 'button-bg' : '',
            ]" @click="buttonClick(item)">
              <div v-if="item.name && item.name.length > 6">
                {{ item.name.slice(0, 4) }} ... {{ item.name.slice(-2) }}
              </div>
              <div v-else>{{ item.name }}</div>
            </div>
            <div class="disease-more" v-if="options && options.length > 0">
              <div class="panel">
                <el-select teleported v-model="buttonValue" placeholder="查看更多>>>" popper-class="mySelectStyle"
                  style="width: 240px" @change="getMore">
                  <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.type" />
                </el-select>
              </div>
            </div>
          </div>
        </el-tab-pane>
      </template>
    </el-tabs>
  </div>
</template>

<script setup lang="ts">
import { treeDiseaseType } from "@/api/ai/disease-type/index";
import {
  DiseaseTypeVO,
  DiseaseTypeQuery,
} from "@/api/ai/disease-type/types";

defineOptions({
  name: "ButtonList",
  inheritAttrs: false,
});
const props = defineProps({
  // 当前选中值，用于改变样式
  diseaseType: {
    type: String,
    default: "",
  },
  bridgeType: {
    type: String,
    default: "1",
  },
  category: {
    type: String,
    default: "",
  },
});
// 监听顶部按钮(checkedItem)点击变化， 当前点击按钮
watch(
  () => props.diseaseType,
  (newValue, oldValue) => {
    current.value = newValue;
  },
  {
    deep: true,
  }
);

watch(
  () => props.bridgeType,
  (newValue, oldValue) => {
    queryParams.bridgeType = newValue;
    getType("0");
  },
  {
    deep: true,
  }
);

const loading = ref(false);
// 查询参数， 类型为
const queryParams = reactive<DiseaseTypeQuery>({
  bridgeType: props.bridgeType,
  category: props.category,
  pid: "0",
});
// 所有按钮
const buttonList = ref<DiseaseTypeVO[]>([]);
const tabList = ref<DiseaseTypeVO[]>([]);
// 用于按钮点击触发选中样式
const current = ref("");
// tab触发
const activeName = ref("");
// 选中参数回传
const emits = defineEmits(["click-item", "get-bridge"]);
const options = ref([]);
// 更多
const buttonValue = ref("");

// 顶部按钮点击事件
function buttonClick(value) {
  current.value = value.type;

  if (value) {
    buttonValue.value = "";
  }
  let data = value;

  // 全部要加上其他的
  if (value.type == "-1") {
    data = {
      type: value.type,
      children: [],
    };
    buttonList.value.forEach((item) => {
      const children = item?.children || [];
      children.forEach((child) => {
        const obj = data.children.find((it) => it.name == child.name);
        if (obj) {
          obj.type = `${obj.type},${child.type}`;
        } else {
          const copy = Object.assign({}, child);
          data.children.push(copy);
        }
      });
    });
  }
  emits("click-item", data);
}
// 获取顶部下拉框选中结果
function getBridge(value) {
  emits("get-bridge", value);
}
function getMore(value) {
  if (value) {
    current.value = "-2";
    emits("click-item", value);
  }
}
// 获取类型， 按钮和tab标签
function getType(pid: string) {
  loading.value = true;
  queryParams.pid = pid ? pid : "0";
  treeDiseaseType(queryParams).then(({ data }) => {
    if (pid === "0") {
      tabList.value = data;
      if (data.length) {
        activeName.value = "0";
        setChildren(data[0].children);
      } else {
        // 清空子级问题列表
        buttonClick("");
      }
    }
    loading.value = false;
  });
}

function setChildren(data: DiseaseTypeVO[]) {
  buttonList.value = data.slice(0, 7);
  options.value = data.slice(7);
  buttonClick(data[0]);
}

// tab标签切换触发
function handleTabClick(tabIndex: string) {
  setChildren(tabList.value[tabIndex].children);
}

onMounted(() => {
  getType("0");
});
</script>

<style lang="scss" scoped>
.button-container {
  position: relative;

  .disease-buttonList {
    display: flex;
    flex-wrap: nowrap;

    .disease-button {
      width: 126px;
      height: 38px;
      background: url("../../../assets/images/d01.png") no-repeat center;
      background-size: 100% 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
      margin-bottom: 20px;
      margin-right: 22.5px;
      font-weight: normal;
      font-size: var(--el-font-size-base);
      color: $main-text;
    }

    .button-bg {
      background: url("../../../assets/images/d02.png") no-repeat center;
      background-size: 100% 100%;
    }

    .disease-more {
      position: relative;
      width: 126px;
      height: 38px;
      text-align: center;
      line-height: 38px;
      font-size: var(--el-font-size-base);
      color: var(--el-color-primary-dark-2);
      cursor: pointer;
      background: var(--el-fill-color-light);
      border-radius: 5px;

      .panel {
        position: absolute;
        z-index: 9;

        :deep(.el-select) {
          width: 126px !important;
          height: 38px;
          border: none;

          .el-select__placeholder {
            color: var(--el-color-primary-dark-2);
          }

          .el-select__icon {
            color: var(--el-color-primary-dark-2);
          }

          .el-select__wrapper {
            height: 38px;
            box-shadow: none;
          }
        }
      }
    }
  }

  .button-top {
    position: absolute;
    right: -138px;
  }
}
</style>
<style lang="scss">
.el-popper.is-light.mySelectStyle {
  background-color: var(--el-fill-color) !important;
  border: none !important;

  .el-select-dropdown__item {
    color: var(--el-color-primary-light-9);
  }

  .is-selected {
    color: var(--menu-text);
    font-weight: 900;
  }

  .is-hovering {
    color: var(--menu-text);
    background: none;
  }
}
</style>
